import React, { Component, createRef } from 'react';
import { Button, Form, Input, Space, message } from 'antd';
import Captcha from '@/components/Captcha'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router-dom'
import url from '@/config/url'
import axios from '@/http/http'
class Mobilelogin extends Component {
    ref1 = createRef();// 创建了一个ref 表单的 引用对象
    ref2 = createRef() // 图像验证码组件的引用对象
    render() {
        return (
            <div>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    ref={this.ref1}
                    onFinish={this.onFinish}
                >
                    <Form.Item
                        name="mobile"
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号!',
                                pattern: /^1[3-9]\d{9}$/
                            },
                        ]}
                    >
                        <Input size='large' prefix={<UserOutlined className="site-form-item-icon" />} placeholder="手机号" />
                    </Form.Item>
                    <Space>
                        <Form.Item
                            name="captcha"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入验证码!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="text"
                                placeholder="验证码"
                                size='large'
                            />

                        </Form.Item>
                        <Form.Item>
                            {/* 验证码组件 */}
                            <Captcha getKey={this.getKey} w={'120px'} ref={this.ref2}></Captcha>
                        </Form.Item>
                    </Space>
                    <Space>
                        <Form.Item
                            name="code"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入短信验证码!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="text"
                                placeholder="短信验证码"
                                size='large'
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button size='large' onClick={this.sendMsgFn} disabled={this.state.time != 30}>{this.state.time != 30 ? this.state.time + '秒' : '发送验证码'}</Button>
                        </Form.Item>
                    </Space>
                    <Form.Item>
                        <Button block type="primary" size='large' disabled={this.state.disabledClick} htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    };
    // 定义的数据 
    state = {
        key: '',
        time: 30,  //倒计时初始变量
        requestId: '', // 短信验证码接口对应返回的id 标识
        disabledClick: true // 设置点击登录按钮为false 初始化不能点击
    }
    // 获取子组件传递过来的key (验证码的唯一标识)
    getKey = (key) => {
        this.setState({
            key: key
        })
    }
    // 点击登录
    onFinish = (values) => {
        // values 为参数对象 

        values.requestId = this.state.requestId
        // console.log(values);
        axios.post(url.msglogin, values).then(res => {
            // console.log(res);
            if (res.data.errNo == 0) {
                // 说明登录成功
                message.success('登录成功', 1);
                // 跳转到首页
                this.props.history.push('/dashboard')
            } else {
                message.error(res.data.errText, 1);
            }
        }).catch(e => { })

    }
    // 倒计时变量
    timer = null
    // 倒计时函数
    timeover = () => {
        this.timer = setInterval(() => {
            // 设置倒计时的条件,当倒计时为0时,清除定时器
            if (this.state.time == 0) {
                clearInterval(this.timer)
                // 当为0 时,然后 验证码的time 值重新回归30, 方便下一次点击
                this.setState({
                    time: 30
                })
            } else {
                this.setState({
                    time: this.state.time - 1
                })
            }

        }, 1000)
    }
    // 点击发送验证码
    sendMsgFn = () => {
        // 01: 首先验证手机号是否ok 
        // 02: 验证 图形验证码输入正确? 如果图形验证码有误,直接提示,如果ok,进行下一步的短信验证码
        // 03: 点击发送短信, 有一个倒计时,当前的点击发送短信按钮,按钮禁用,当倒计时结束,按钮解除禁用,同时显示数字
        this.ref1.current.validateFields(['mobile', 'captcha']).then(res => {
            // console.log(res);
            //第一步: 走到这一步,说明 手机号和图形验证码都符合对应表单的校验规则
            //第二步: 验证图像验证码是否正确 
            axios.post(url.captchaverify, {
                key: this.state.key,
                captcha: res.captcha
            }).then(res1 => {
                console.log(res1);
                if (res1.data.errNo === 0) {
                    // 说明图像验证码验证成功,再进行下一步的发送短信码
                    axios.post(url.sendCode, {
                        token: res1.data.context.token, // 该字段是图形验证码接口返回的字段
                        mobile: res.mobile,
                        type: 0
                    }).then(res2 => {
                        if (res2.data.errNo == 0) {
                            // console.log(res2);
                            // 说明验证码发送成功
                            message.success('短信发送成功', 1)
                            // 倒计时
                            this.timeover()
                            // 给state 中的 requestId 赋值 ,作为短信的唯一标识
                            this.setState({
                                requestId: res2.data.requestId
                            })

                            // 设置点击登录按钮为false,
                            this.setState({
                                disabledClick: false
                            })

                        } else {
                            // 短信验证码发送失败
                            message.error(res2.data.errText, 1)
                            // 更新验证码
                            this.ref2.current.loadCaptcha()
                            // 清空手机号和图形验证码的输入项
                            this.ref1.current.setFieldsValue({
                                captcha: '',  // 将验证码的输入项设置为空字符串
                                mobile: ''
                            })
                        }


                    }).catch(e => { })


                } else {
                    // 说明图形验证码验证码不成功
                    message.error(res1.data.errText, 1)
                    // 重新更新一个图形验证码
                    this.ref2.current.loadCaptcha()
                    // 清空验证码的输入项
                    this.ref1.current.setFieldsValue({
                        captcha: ''  // 将验证码的输入项设置为空字符串
                    })
                }
            }).catch(e => { })
        }).catch(e => {
            console.log(e);
        })
    }
}

export default withRouter(Mobilelogin);
